<template>
  <li :class="`rank-${index} ${data.direction}`">
    <a :href="data.href" target="_blank">
      <div class="content-detail">
        <div :class="`img-contain rank-${index}`">
          <UserAvatar :user="data.user">
            <div slot="placeholder" class="image-slot">
              加载中
              <span class="dot">...</span>
            </div>
          </UserAvatar>
        </div>
        <h3>
          <span class="name t-over-hidden t-nowrap">{{ data.title }}</span>
          <em v-if="data.status" class="live" style>{{ data.status }}</em>
          <div v-if="data.company" style="font-size:9px;">{{ data.company }}</div>
        </h3>
        <p style="color: #888888;">
          <span>{{ data.levelDesc }}</span>
        </p>
        <div :class="`rank-number ${data.direction}`">
          <a>0{{ index }}</a>
          <span />
        </div>
      </div>
    </a>
  </li>
</template>

<script>
export default {
  name: 'RankAvatar',
  components: {
    UserAvatar: () => import('@/components/User/UserAvatar')
  },
  props: {
    index: { type: Number, default: 1 },
    data: { type: Object, default: null, require: true }
  }
}
</script>
<style lang="scss" scoped>
.t-no-wrap,
.t-nowrap {
  white-space: nowrap;
}
.t-over-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
}
@import '../style';
li {
  width: 200px;
  float: left;
  margin-right: 30px;
  height: 335px;
  position: relative;
  list-style: none;
  h3 .name {
    max-width: 95px;
    display: inline-block;
    vertical-align: middle;
  }
  .rank-number {
    text-align: left;
    font-style: italic;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  div.content-detail {
    bottom: 4px;
    height: 180px;
    position: absolute;
    text-align: center;
    background: #f8f8f8;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.12);
    width: 200px;
    border-radius: 10px;
    p {
      text-align: center;
      margin: 5px 0 15px;
    }
    .rank-number {
      width: 80px;
      height: 34px;
      line-height: 34px;
      margin: 0 auto;
      font-size: 24px;
      border-radius: 20px;
      padding-left: 10px;
    }
    h3 {
      text-align: center;
      margin: 10px 0;
      font-size: 17px;
    }
  }
}
li.rank-2.down .rank-number span,
li.rank-2.up .rank-number span {
  background: url()
    no-repeat;
}

li.rank-2.down .rank-number span {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

li.rank-2.balance .rank-number span {
  background: url()
    no-repeat;
}

li.rank-2 .img {
  border: 2px solid #44d6ff;
  overflow: hidden;
}

li.rank-2 .img img {
  width: 100%;
  height: 100%;
}

li.rank-2 div.content-detail .img-contain {
  position: relative;
  margin-top: -52px;
}

li.rank-2 div.content-detail .img-contain .deco {
  top: -29px;
  left: 21px;
  position: absolute;
}

li.rank-2 div.content-detail h3 {
  color: #44d6ff;
}

li.rank-2 div.content-detail .rank-number {
  position: relative;
  color: #44d6ff;
  border: 1px solid #44d6ff;
}

li.rank-2 div.content-detail .rank-number span {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 12px;
}

li.rank-1 div.content-detail {
  height: 200px;
}

li.rank-1.down .rank-number span,
li.rank-1.up .rank-number span {
  background: url()
    no-repeat;
}

li.rank-1.down .rank-number span {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

li.rank-1.balance .rank-number span {
  background: url()
    no-repeat;
}

li.rank-1 .img {
  border: 2px solid #ff6744;
}

li.rank-1 div.content-detail p {
  margin-bottom: 35px;
}

li.rank-1 div.content-detail .img-contain {
  position: relative;
  margin-top: -52px;
}

li.rank-1 div.content-detail .img-contain .deco {
  top: -39px;
  left: 14px;
  position: absolute;
}

li.rank-1 div.content-detail h3 {
  color: #ff6744;
}

li.rank-1 div.content-detail .rank-number {
  position: relative;
  color: #ff6744;
  border: 1px solid #ff6744;
}

li.rank-1 div.content-detail .rank-number span {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 12px;
}

li.rank-3 {
  margin-right: 0;
}

li.rank-3.down .rank-number span,
li.rank-3.up .rank-number span {
  background: url()
    no-repeat;
}

li.rank-3.down .rank-number span {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

li.rank-3.balance .rank-number span {
  background: url()
    no-repeat;
}

li.rank-3 .img {
  border: 2px solid #ffb200;
}

li.rank-3 div.content-detail .img-contain {
  position: relative;
  margin-top: -52px;
}

li.rank-3 div.content-detail .img-contain .deco {
  top: -39px;
  left: 14px;
  position: absolute;
}

li.rank-3 div.content-detail h3 {
  color: #ffb200;
}

li.rank-3 div.content-detail .rank-number {
  position: relative;
  color: #ffb200;
  border: 1px solid #ffb200;
}

li.rank-3 div.content-detail .rank-number span {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 12px;
}

li .img {
  overflow: hidden;
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0 auto;
}

li .img img {
  width: 100%;
  height: 100%;
}
</style>
